<script lang='ts' setup>
import { SiderMenuInfo, SiderMenuEnum } from '@/models/@types';
import { appContext } from '@/models/app.context';
import { onMounted, ref, watch } from 'vue';
import SiderItem from './SiderItem.vue'
enum ActionEnum { Empty, Add, Edit, Remove, Default };


/**
 * 说明，公共侧边栏 API 如下
 * -- props --
 * menus        菜单列表  SiderMenuInfo[]
 * defaultUid   默认选择菜单的 uid    default：修改会话名
 * editTitle    编辑 弹窗的标题
 * removeDesc   确认删除的提示语      default：确认删除吗?
 *
 * -- emits --
 * add          发送      Parma： { type: SiderMenuEnum, parent: 有则是在合集下创建子集 }
 * clear        删除      Parma： null
 * clickItem    点击菜单  Parma： value: 菜单的uid
 * edit         编辑      Prama： { uid: 菜单的uid, label: 修改后的值 }
 * remove       删除      Parma： value: 菜单的uid
 *
 * -- slots --
 * null
 */
const props = withDefaults(defineProps<{ menus: SiderMenuInfo[], defaultUid?: string, editTitle?: string, removeDesc?: string }>(), {
  menus: [] as any,
  editTitle: '修改会话名',
  removeDesc: '确认删除吗?'
})
const emits = defineEmits(['add', 'clear', 'clickItem', 'edit', 'remove']);











watch(() => props.defaultUid, (newVal) => {
  if (newVal !== currMenu.value) {
    currMenu.value = newVal;
    onClickMenuItem(currMenu.value, ActionEnum.Default)
  } else if (!currMenu.value && !newVal) {
    onClickMenuItem(props.menus[0]?.uid, ActionEnum.Default)
  }
  currActiveKey.value = [props.menus?.find(val => val.childrens?.some(val => val.uid === currMenu.value))?.uid];
})
watch(() => props.menus, (newVal: SiderMenuInfo[]) => {
  if (!newVal?.length) {
    emits('add', { type: SiderMenuEnum.Leaf })
  }
  currActiveKey.value = [newVal.find(val => val.childrens?.some(val => val.uid === currMenu.value))?.uid];
})

const currMenu = ref('')
const currActiveKey = ref([])
const collapsed = ref(false);
const action = ref(ActionEnum.Empty);
let currMenuUid = '';

const siderWidth = ref(200);
onMounted(() => {
  const { viewWidth } = appContext.system.data;
  collapsed.value = !Boolean(viewWidth > 1000);
  if (Boolean(viewWidth > 1000)) {
    siderWidth.value = 300
  } else {
    siderWidth.value = viewWidth * .7
  }
})

function onClickMenuItem(uid: string, type: ActionEnum = ActionEnum.Empty) {
  if (!uid) return;
  currMenuUid = uid;
  action.value = type;
  if (type === ActionEnum.Default) {
    currMenu.value = uid;
    emits('clickItem', uid);
  } else if (type === ActionEnum.Edit) {
    edit.value = props.menus.find(val => val.uid === uid)?.label || '';
  } else if (type === ActionEnum.Remove) {
    emits('remove', uid)
  }
}

const edit = ref('');
function onEdit(): void {
  emits('edit', { uid: currMenuUid, label: edit.value })
  action.value = ActionEnum.Empty;
}



</script>
<template>
  <a-layout-sider class="slider" :class="{ 'slider-ac': collapsed }" :collapsed="collapsed" breakpoint="xl"
    :width="siderWidth" :collapsed-width="0">
    <div class="sider-box flex-c">
      <div class="btns flex">
        <div @click="emits('add', { type: SiderMenuEnum.Leaf })" class="btn flex">新会话 </div>
        <div @click="emits('add', { type: SiderMenuEnum.Group })" class="btn flex">新合集 </div>
      </div>
      <div class="main scrollbar-none">
        <div class="menus">
          <a-collapse :bordered="false" v-model:active-key="currActiveKey" accordion>
            <div v-for="item in menus" :key="item.uid">
              <a-collapse-item @click="null" :header="item.label" v-if="item.type === SiderMenuEnum.Group"
                :key="item.uid">
                <template #expand-icon="{ active }">
                  <icon-folder-delete size="17" v-if="active" />
                  <icon-folder size="17" v-else />
                </template>
                <template #extra>
                  <icon-plus class="icon" @click.stop="emits('add', { type: SiderMenuEnum.Leaf, parent: item.uid })" />
                  <icon-edit class="icon" @click.stop="onClickMenuItem(item.uid, ActionEnum.Edit)" />
                  <a-popconfirm :content="removeDesc" type="error" @ok="onClickMenuItem(item.uid, ActionEnum.Remove)">
                    <icon-delete class="icon" @click.stop="null" />
                  </a-popconfirm>
                </template>
                <div class="child" v-for="child in item.childrens" :key="child.uid">
                  <SiderItem :is-curr="child.uid === currMenu" :item="child" :removeDesc="removeDesc"
                    @click-item="onClickMenuItem(child.uid, ActionEnum.Default)"
                    @edit="onClickMenuItem(child.uid, ActionEnum.Edit)"
                    @remove="onClickMenuItem(child.uid, ActionEnum.Remove)" />
                </div>
              </a-collapse-item>

              <SiderItem :is-curr="item.uid === currMenu" :item="item" :removeDesc="removeDesc" v-else
                @click="onClickMenuItem(item.uid, ActionEnum.Default)" @edit="onClickMenuItem(item.uid, ActionEnum.Edit)"
                @remove="onClickMenuItem(item.uid, ActionEnum.Remove)" />
            </div>
          </a-collapse>
        </div>
      </div>
      <div class="btns">
        <a-popconfirm content="确认全部清空吗？" type="error" @ok="emits('clear')">
          <div class="btn flex">清空记录 </div>
        </a-popconfirm>
      </div>

    </div>
    <div class="collapsed" @click="collapsed = !collapsed">
      <icon-right-circle size="30" v-if="collapsed" />
      <icon-left-circle size="30" v-else />
    </div>
  </a-layout-sider>

  <a-modal :visible="action === ActionEnum.Edit" align-center @ok="onEdit" @cancel="action = ActionEnum.Empty"
    :title="editTitle" draggable width="auto">
    <a-input :style="{ width: '100%' }" placeholder="请输入新名称" v-model="edit" />
  </a-modal>
</template>
<style lang='scss' scoped>
.slider {
  // padding: 20px;
  margin-right: 20px;
  border-right: 2px solid;

  .sider-box {
    height: 100%;
    justify-content: space-between;

    .main {
      flex: 1;
      overflow: auto;

      .icon {
        margin-right: 5px;
      }

      ::v-depp .arco-collapse-item-header-left {
        padding-right: 13px;
        padding-left: 34px;
      }

      .child {
        width: 100%;
        margin: 0 -15px;
        width: 118%;
        transform: translateX(-6%);

        &:first-child {
          margin-top: -15px;
        }

        &:last-child {
          margin-bottom: -15px;
        }
      }
    }

    .btns {
      width: calc(100% - 40px);
      margin: 20px 20px;
      height: 40px;
      box-shadow: 0 0 10px var(--color-border-3);
      border-radius: 7px;
      background: rgb(var(--primary-4));
      color: #fff;
      overflow: hidden;

      @media screen and (min-width: 1200px) {
        &:hover {
          // background: var(--color-neutral-3);
          box-shadow: 0 0 10px var(--color-border-4);
          transform: translateY(-1px);
          animation: all 1s;
        }
      }

      .btn {
        flex: 1;
        height: 100%;
        cursor: pointer;
        justify-content: center;

        &:first-child {
          flex: 1.2;
          border-radius: 7px 0 30px 7px;
          background: var(--color-bg-1);
          color: rgb(var(--primary-6));
        }
      }
    }
  }

  .collapsed {
    position: absolute;
    right: 0;
    top: 50%;
    cursor: pointer;
    z-index: 99;

    svg {
      height: 100%;
    }
  }

}

.slider-ac {
  padding: 0;
  margin-right: 0;
  border-right: none;

  .collapsed {
    right: -30px;
  }
}
</style>
